<template>
  <div>
      <div class="model">
          <div class="model-title">
              <h2>注册产品分布</h2>
          </div>
          <div class="model-echart">
              <div id="productDistributePie"></div>
              <div id="productDistributeBar"></div>
          </div>
      </div>
  </div>
</template>
<script>
import { getProductTypeCount, getProductClassifyCount } from '@/api/park.js'

export default {
    data() {
        return {
            form: {
                year: ''
            },
            echartPieData: {
                x: [],
                y: []
            },
            echartBarData: {
                x: [],
                y: []
            },
            productDistributeBarChart: '',
            productDistributePieChart: ''
        }
    },
    methods: {
        //全国、各省--产品分布(IVD、有源、无源)
        async getProductPieCount(form) {
            if (form.year === '') return
            const res = await getProductTypeCount({
                year: form.year
            })
            let x = [], y = [];
            res.map((e, index) => {
                x.push({'name': e.type, 'value': e.counts})
                y.push(e.type)
            })
            this.echartPieData.x = x
            this.echartPieData.y = y
            if (this.productDistributePieChart !== '') {
                let obj = {
                    seriesData: this.echartPieData.x,
                    radius: '55%'
                };
                this.productDistributePieChart.clear();
                this.productDistributePieChart.setOption(this.$lib.pieChart(obj));
                this.productDistributePieChart.resize();
            } else {
                this.initECharPie()
            }
        },
        initECharPie() {
            let obj = {
                seriesData: this.echartPieData.x,
                radius: '55%'
            };
            this.productDistributePieChart = this.$echarts.init(document.getElementById('productDistributePie'));
            this.productDistributePieChart.setOption(this.$lib.pieChart(obj));
            window.onresize = () => {
                this.productDistributePieChart.resize();
            }
        },
        //全国、各省--产品分布(I、II、III)
        async getProductBarCount(form) {
            if (form.year === '') return
            const res = await getProductClassifyCount({
                year: form.year
            })
            let x = [], y = [];
            res.map((e, index) => {
                x.push(e.counts)
                y.push(e.type)
            })
            this.echartBarData.x = x
            this.echartBarData.y = y
            if (this.productDistributeBarChart !== '') {
                let objs = {
                    xAxisData: this.echartBarData.y,
                    seriesData: this.echartBarData.x
                }
                this.productDistributeBarChart.clear();
                this.productDistributeBarChart.setOption(this.$lib.acrossChart(objs));
                this.productDistributeBarChart.resize();
            } else {
                this.initECharBar()
            }
        },
        initECharBar() {
            let objs = {
                xAxisData: this.echartBarData.y,
                seriesData: this.echartBarData.x
            }
            this.productDistributeBarChart = this.$echarts.init(document.getElementById('productDistributeBar'));
            this.productDistributeBarChart.setOption(this.$lib.acrossChart(objs));
            window.onresize = () => {
                this.productDistributeBarChart.resize();
            }
        }
    },
    watch: {
        '$store.state.app.year': {
            handler: function (nVal, oVal) {
                this.form.year = nVal
                this.getProductPieCount(this.form);
                this.getProductBarCount(this.form);
            },
            immediate: true
        }

    }
}
</script>
<style scoped lang="scss">
.model{
    background: url('../../assets/x1/modal_2_header.png') no-repeat top left, url('../../assets/x1/modal_2_footer.png') no-repeat bottom left;
    background-size: 100% auto;
}

#productDistributePie, #productDistributeBar {
    width: 100%;
    height: 11vw;
}
.model-title{
    padding: screenVw(1) 0 0;

    h2 {
        text-align: center;
        color: #78dffd;
        font-size: screenVw(1.2);
    }
}

.model-echart {
    display: flex;
    padding: screenVw(0.5) 0;

    div {
        flex: 1;
    }
}

</style>
